<template>
  <div>
    <el-card
      class="box-card"
      style="margin-top: 40px;"
    >
      <div
        slot="header"
        class="clearfix"
      >
        <svg-icon name="international" />
        <span style="margin-left:10px;">{{ $t('i18nView.title') }}</span>
      </div>
      <div>
        <el-radio-group
          v-model="lang"
          size="small"
        >
          <el-radio
            label="zh"
            border
          >
            简体中文
          </el-radio>
          <el-radio
            label="en"
            border
          >
            English
          </el-radio>
          <el-radio
            label="es"
            border
          >
            Español
          </el-radio>
          <el-radio
            label="ja"
            border
          >
            日本語
          </el-radio>
          <el-radio
            label="ko"
            border
          >
            한국어
          </el-radio>
        </el-radio-group>
        <el-tag
          style="margin-top: 15px; display: block;"
          type="info"
        >
          {{ $t('i18nView.note') }}
        </el-tag>
      </div>
    </el-card>

    <el-row
      :gutter="20"
      style="margin: 100px 15px 50px;"
    >
      <el-col
        :span="12"
        :xs="24"
      >
        <div class="block">
          <el-date-picker
            v-model="date"
            :placeholder="$t('i18nView.datePlaceholder')"
            type="date"
          />
        </div>
        <div class="block">
          <el-select
            v-model="value"
            :placeholder="$t('i18nView.selectPlaceholder')"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div class="block">
          <el-button
            class="item-btn"
            size="small"
          >
            {{ $t('i18nView.default') }}
          </el-button>
          <el-button
            class="item-btn"
            size="small"
            type="primary"
          >
            {{ $t('i18nView.primary') }}
          </el-button>
          <el-button
            class="item-btn"
            size="small"
            type="success"
          >
            {{ $t('i18nView.success') }}
          </el-button>
          <el-button
            class="item-btn"
            size="small"
            type="info"
          >
            {{ $t('i18nView.info') }}
          </el-button>
          <el-button
            class="item-btn"
            size="small"
            type="warning"
          >
            {{ $t('i18nView.warning') }}
          </el-button>
          <el-button
            class="item-btn"
            size="small"
            type="danger"
          >
            {{ $t('i18nView.danger') }}
          </el-button>
        </div>
      </el-col>
      <el-col
        :span="12"
        :xs="24"
      >
        <el-table
          :data="tableData"
          fit
          highlight-current-row
          border
          style="width: 100%"
        >
          <el-table-column
            :label="$t('i18nView.tableName')"
            prop="name"
            width="100"
            align="center"
          />
          <el-table-column
            :label="$t('i18nView.tableDate')"
            prop="date"
            width="120"
            align="center"
          />
          <el-table-column
            :label="$t('i18nView.tableAddress')"
            prop="address"
          />
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator'
import { AppModule } from '@/store/modules/app'
import local from './local'

@Component({
  name: 'I18n'
})
export default class extends Vue {
  private date = ''
  private value = ''
  private options: any[] = []
  private tableData = [{
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  }]

  get lang() {
    return AppModule.language
  }

  set lang(lang) {
    AppModule.SetLanguage(lang)
    this.$i18n.locale = lang
    this.setOptions()
  }

  created() {
    const viewName = 'i18nView'
    if (!this.$i18n.getLocaleMessage('en')[viewName]) {
      this.$i18n.mergeLocaleMessage('en', local.en)
      this.$i18n.mergeLocaleMessage('zh', local.zh)
      this.$i18n.mergeLocaleMessage('es', local.es)
      this.$i18n.mergeLocaleMessage('ja', local.ja)
      this.$i18n.mergeLocaleMessage('ko', local.ko)
    }
    this.setOptions() // set default select options
  }

  private setOptions() {
    this.options = [
      {
        value: '1',
        label: this.$t('i18nView.one')
      },
      {
        value: '2',
        label: this.$t('i18nView.two')
      },
      {
        value: '3',
        label: this.$t('i18nView.three')
      }
    ]
  }
}
</script>

<style lang="scss" scoped>
.box-card {
  width: 600px;
  max-width: 100%;
  margin: 20px auto;
}

.item-btn {
  margin-bottom: 15px;
  margin-left: 0px;
}

.block {
  padding: 25px;
}
</style>
